<template>
  <div class="">
    <Box>
      <div slot="box">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="6">
            <div style="width: 100%">
              <a-select v-model="data.type" placeholder="流程类型" style="width: 100%" @change="handleChange1">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="1">
                  案事件任务
                </a-select-option>
                <a-select-option value="2">
                  物资调用
                </a-select-option>
                <a-select-option value="3">
                  启动预案
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div style="width: 100%">
              <a-input v-model="data.applicant" placeholder="请输入申请人"></a-input>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <a-button type="primary" @click="query">查询</a-button>
          </a-col>
        </a-row>

        <!--        <div>-->
        <!--          <a-row :gutter="16">-->
        <!--            <a-col class="gutter-row" :span="6">-->
        <!--              <a-button type="primary" >查询</a-button>-->
        <!--              <a-button style="margin-left: 10px;">重置</a-button>-->
        <!--              <a-button style="margin-left: 10px;">事件上报</a-button>-->
        <!--            </a-col>-->
        <!--          </a-row>-->
        <!--        </div>-->
      </div>
    </Box>
    <Box>
      <div slot="box">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="table"
          :showSelection="false"
          :showPagination="true"
          :customRow="clickCustomRow"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="operate" slot-scope="text, record">
            <a style="margin: 0 5px" href="javascript:;" @click="listLoook(record)">查看</a>
            <a style="margin: 0 5px" href="javascript:;" @click="shenpi(record,2)">通过</a>
            <a style="margin: 0 5px" href="javascript:;" @click="shenpi(record,3)">驳回</a>
          </template>
        </CustomTable>

      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
        >
          <a-form-model-item label="审批意见" prop="eventOverview">
            <a-input v-model="form.eventOverview" type="textarea" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>

  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import Box from '@views/xlgc/Box'
import { getDictItemsFromCache } from '@api/api'
import { getAllList, getExbacklogList, getMineList, putTurnRound } from '@api/xlgc/staging'
export default {
  name: 'List',
  components: { CustomTable, Box },
  data() {
    return {
      visible: false,
      form: {
        eventOverview: ''
      },
      rules: {
        eventOverview: [
          // {  message: '该项不能为空', trigger: 'blur' },
          { required: true, min: 5, message: '请输入至少五个字符', trigger: 'blur' }
        ]
      },
      value: '',
      dateFormat: 'YYYY-MM-DD',
      data: {

        applicant: undefined,
        processType: undefined

      },
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '流程名称',
          dataIndex: 'title',
          scopedSlots: { customRender: 'title' }
        },
        {
          title: '流程类型',
          dataIndex: 'processType',
          scopedSlots: { customRender: 'processType' }
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          scopedSlots: { customRender: 'applicant' }
        },
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          scopedSlots: { customRender: 'applyTime' }
          // customRender: (text,record) => {
          //   //字典值翻译通用方法
          //   return this.filterMultiDictText('cases_level', text)
          // }
        },
        {
          title: '操作',
          width: 200,
          align: 'center',
          dataIndex: 'operate',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      pageData: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      table: {},
      val: {},
      sta: 0,
      pass: ''
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
  },

  methods: {
    listLoook(val) {
      console.log(val)
      if(val.processType === "案(事)件"){
        let item = ''
        if (val.taskType == '命案防控') item = 'Mi'
        if (val.taskType == '矛盾纠纷') item = 'Ma'
        if (val.taskType == '线路案事件') item = 'Xi'
        if (val.taskType == '师生安全案事件') item = 'Te'
        if (val.taskType == '重特大案事件') item = 'Zh'
        if (item != '') {
          this.$router.push({
            path: '/LifeCase/detailed',
            query: {
              bj: false,
              processStatus: val.processStatus,
              situation: 'TE',
              item: item,
              id: val.taskId,
              caozuo: val
            }
          })
        } else {
          this.$message.error('出现了意料之外的错误')
        }
      }
      if(val.processType === "启动预案"){
        this.$router.push({
          path: '/manage/details',
          query: {
            id: val.taskId
          }
        })
      }
      if(val.processType === "物资调用"){
        this.$router.push({
          path:'/AgencyDetails',
          query:{
            // name:record.storageLocation,
            id:val.taskId
          }
        })
      }

    },
    shenpi(val, sta) {
      this.visible = true
      this.sta = sta
      this.val = val
      console.log(val)
    },
    handleOk() {
      this.submitForm()
      if (!this.pass) {
        this.$message.error('请正确填写审批意见')
      } else {
        this.turnRound(this.val)

        this.visible = false
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        this.pass = valid
        return valid
      })
    },
    turnRound(val) {
      let data = {
        processId: val.processId,
        remark: this.form.eventOverview,
        status: this.sta
      }
      putTurnRound(data)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.$message.success('审批成功')
            this.refreshTable(Object.assign({}, this.pageFilter, this.data))
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable(Object.assign({}, this.pageFilter, this.data))
    },
    clickCustomRow(record, index) {
      var _this = this
      return {
        on: {
          // 事件
          click: () => {
            console.log(record)
            this.$emit('clickRow', record)
          }
        }
      }
    },

    query() {
      console.log(Object.assign({}, this.pageFilter, this.data))
      this.refreshTable(Object.assign({}, this.pageFilter, this.data))
    },
    refreshTable(val) {
      this.loading = true
      getExbacklogList(val)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.table = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },

    onChange1(e) {
      console.log(e.target.value)
      if (e.target.value == '1') {
        this.data.state = ''
      } if (e.target.value == '2') {
        this.data.state = '进行中'
      } if (e.target.value == '3') {
        this.data.state = '已完结'
      }
    },
    onChange(date, dateString) {
      this.data.date = dateString
    },
    handleChange1(val) {
      this.data.processType = val
      return val
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>
.gutter-row{
  display: flex;
  align-items: center;
}
</style>
